<template>
    <div class="productDetails">
        <Headers title="产品详情" />
        <div class="productDetails_container">
            <div class="product_item clearfix">
                <div class="product_item_icon">
                    <img :src="url" />
                </div>
                <div class="product_item_description">
                    <p class="title"> {{title}}</p>
                    <p class="price">参考价：￥780/50ml</p>
                    <p class="instruction">产品说明书：</p>
                    <p class="instruction_item">功效:深彻润透肌肤</p>
                    <p class="instruction_item">适用肤质:中性/混合性皮肤</p>
                    <p class="instruction_item">针对:细纹、皱纹、松弛、干燥、缺水、暗哑、无水、无油</p>
                    <p class="instruction_item">主要科技/成分:"智慧生态"科技，皱纹填充技术，</p>
                </div>
            </div>
            <p class="buy_title">购买推荐</p>
            <div class="recommed_list">
                <div class="recommed_list_item clearfix">
                    <div class="recommed_item_icon">
                        <img :src="url" />
                    </div>
                    <div class="recommed_item_description">
                        <p class="title">天天网</p>
                        <p class="price">价格：￥390.00</p>
                        <p class="price">市场价：￥
                            <del>540.00</del>
                        </p>
                    </div>
                    <div class="recommed_item_commend">
                        <img src="../../images/mainTwo/productdetails/05.png" />
                        <span>1100人评价</span>
                    </div>
                </div>
                <div class="recommed_list_item clearfix">
                    <div class="recommed_item_icon">
                        <img :src="url" />
                    </div>
                    <div class="recommed_item_description">
                        <p class="title">聚美优品</p>
                        <p class="price">价格：￥388.00</p>
                        <p class="price">市场价：￥
                            <del>540.00</del>
                        </p>
                    </div>
                    <div class="recommed_item_commend">
                        <img src="../../images/mainTwo/productdetails/05.png" />
                        <span>3900人评价</span>
                    </div>
                </div>
                <div class="recommed_list_item clearfix">
                    <div class="recommed_item_icon">
                        <img :src="url" />
                    </div>
                    <div class="recommed_item_description">
                        <p class="title">天猫</p>
                        <p class="price">价格：￥358.00</p>
                        <p class="price">市场价：￥
                            <del>540.00</del>
                        </p>
                    </div>
                    <div class="recommed_item_commend">
                        <img src="../../images/mainTwo/productdetails/05.png" />
                        <span>2930人评价</span>
                    </div>
                </div>
            </div>
            <div class="bottom_nav">
                <p class="flex_item active">口碑点评</p>
                <p class="flex_item">相关话题</p>
                <p class="flex_item">相似产品</p>
            </div>
            <div class="evaluate clearfix">
                <div class="star_container clearfix">
                    <div class="star_list">
                        <p>4.0</p>
                        <p>
                            <img src="../../images/mainTwo/productdetails/07.png" />
                            <img src="../../images/mainTwo/productdetails/07.png" />
                            <img src="../../images/mainTwo/productdetails/07.png" />
                            <img src="../../images/mainTwo/productdetails/07.png" />
                            <img src="../../images/mainTwo/productdetails/06.png" />
                        </p>
                    </div>
                    <div class="progress">
                        五星：
                        <el-progress :percentage="80"></el-progress>
                        四星：
                        <el-progress :percentage="80"></el-progress>
                        三星：
                        <el-progress :percentage="40"></el-progress>
                        二星：
                        <el-progress :percentage="14"></el-progress>
                        一星：
                        <el-progress :percentage="7"></el-progress>
                    </div>
                </div>
                <div class="personal">
                    <p>
                        <img src="../../images/mainTwo/productdetails/08.png" />徐娇</p>
                    <p class="text">
                        <img src="../../images/mainTwo/productdetails/09.png" />
                        <span>
                            众所周知，眼部肌肤往往是脆弱，容易衰老，容易暴露您的年龄的。雅诗兰黛（Estee Lauder）青春抗皱滋润眼霜5ml，采用了三项针对眼部不同问题的技术。令您脆弱的...
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Headers from "../../components/changeHeader"
export default {
    name: "productDetails",
    components: { Headers },
    data() {
        return {
            url: '',
            title: ''
        }
    },
    created() {
        if (this.$route.params.url) {
            sessionStorage.url = this.$route.params.url;
            sessionStorage.producttitle = this.$route.params.title
        }
        this.$data.url = sessionStorage.url
        this.$data.title = sessionStorage.producttitle
    }
}
</script>
<style lang="less" scoped>
.productDetails_container {
    padding-top: 150/75rem;
    width: 710/75rem;
    margin: 0 auto;
}

.product_item {
    .product_item_icon {
        width: 200/75rem;
        height: 200/75rem;
        border: 1px solid #808080;
        padding: 5/75rem;
        float: left;
        border-radius: 10px;
        img {
            margin: 0 auto;
            width: 190/75rem;
            height: 165/75rem;
        }
    }
    .product_item_description {
        float: left;
        font-size: 26/75rem;
        margin-left: 40/75rem;
        color: #808080;
        p {
            width: 430/75rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 30/75rem;
        }
        .title {
            color: #000;
        }
        .price,
        .instruction {
            font-size: 24/75rem;
        }
        .instruction_item {
            font-size: 20/75rem;
            color: #ccc;
        }
    }
}

.buy_title {
    margin: 60/75rem 0;
    font-size: 30/75rem;
    color: #808080;
}

.recommed_list {
    padding: 10/75rem;
    box-shadow: 0 0 20/75rem #ccc;
    .recommed_list_item {
        margin: 20/75rem 0;
    }
    .recommed_item_icon {
        width: 130/75rem;
        height: 130/75rem;
        border: 1px solid #808080;
        padding: 5/75rem;
        border-radius: 10px;
        float: left;
        img {
            margin: 0 auto;
            width: 110/75rem;
            height: 110/75rem;
        }
    }
    .recommed_item_description {
        float: left;
        font-size: 26/75rem;
        margin-left: 40/75rem;
        color: #808080;
        width: 300/75rem;
        p {
            width: 430/75rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 45/75rem;
        }
        .title {
            color: #000;
        }
        .price {
            font-size: 24/75rem;
        }
    }
    .recommed_item_commend {
        float: right;
        margin-top: 40/75rem;
        color: #ccc;
        img {
            display: inline-block;
        }
        span {
            font-size: 24/75rem;
        }
    }
}

.bottom_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 30/75rem 0;
    .flex_item {
        flex-frow: 1;
        font-size: 28/75rem;
        font-weight: 700;
        width: 100%;
        color: #808080;
        text-align: center;
        border-right: 4px solid #ccc;
    }
    .flex_item:last-child {
        border: 0 none;
    }
    .active {
        color: #ff406f;
    }
}

.evaluate {
    padding: 20/75rem 30/75rem;
    box-shadow: 0 0 20px #ccc;
    .star_list {
        margin-left: 20/75rem;
        margin-top: 100/75rem;
        width: 170/75rem;
        float: left;
        p {
            font-size: 24/75rem;
            text-align: center;
            img {
                display: inline-block;
            }
        }
    }
    .progress {
        float: right;
        width: 350px;
        font-size: 24/75rem;
        .el-progress {
            .el-progress-bar {
                width: 300/75rem;
            }
        }
    }
    .personal {
        font-size: 25/75rem;
        img {
            display: inline-block;
            margin-right: 20/75rem;
        }
        .text {
            margin-left: 30/75rem;
            img {
                float: left;
                margin-top: 10/75rem;
            }
            span {
                color: #ccc;
                font-size: 20/75rem;
            }
        }
    }
}
</style>
